/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import Navbar from '../component/Navbar';
import './style/message.css';
const tabs = ["个人消息", "系统消息"]
class message extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0,
            listIndex: -1,
            type: true,
            list: ["限时抽奖活动开始了，快去参加吧！", "限时抽奖活动开始了，快去参加吧！", "限时抽奖活动开始了，快去参加吧！"]
        }
    }
    goBack = () => {
        this.props.history.goBack();
    }
    //tab切换
    jumpTab(index) {
        this.setState({
            tabIndex: index,
        })
    }
    //点击list展开
    jumpListItem(index) {
        const { listIndex } = this.state
        if (listIndex === index) index = -1
        this.setState({
            listIndex: index
        })
    }
    render() {
        const { list, listIndex, tabIndex } = this.state
        return (
            <div className='message'>
                <div className='navtor'>
                    <div className='backDiv' onClick={() => this.goBack()}> <img alt='' src={require('./img/left.png')}></img></div>
                    <div className='tabs'>
                        <div className='titleList'>
                            {
                                tabs.map((item, index) => {
                                    return <div onClick={() => this.jumpTab(index)} key={index} className={tabIndex === index ? "titleTrue" : 'titleItem'} >{item}</div>
                                })
                            }
                        </div>
                    </div>

                </div>
                <div className='scroll'>

                    <div className='content'>
                        {
                            list.map((item, index) => {
                                return <div className="listItem" key={index} onClick={() => this.jumpListItem(index)}>
                                    <div className="flex align-center">
                                        <img className="iconCircle" src={require('./img/iconCircle.png')} />
                                        <div className="titleName flex-1 ellipsis">{item}{tabIndex}</div>
                                        {
                                            index === listIndex ? <img className="imgIcon" src={require('./img/help/icon2.png')} /> : <img className="imgIcon" src={require('./img/help/icon1.png')} />
                                        }
                                    </div>
                                    <div className="time">2020-4-23 12:12:23</div>
                                    {
                                        index === listIndex ? <div className="answer">期货是我国期货市场服务实体经济发展的一项重要举措，大商所自2001年开始进行生猪系列标的研究，经过二十年的探索和沉淀，如今现货和期货各方面条件已经成熟，市场对于生猪期货的呼声亦是水涨船高。 2020年4月24日中国证监会发布公告，正式批准开展生猪期货交易，未来，生猪期货将为我国生猪产业提供有效的风险管理工具，推动行业健康高效得发展。</div> : null
                                    }
                                </div>
                            })
                        }
                    </div>
                </div>
            </div >
        )
    }
}

export default message;